<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_refs</title>
</head>
<body>
<br>
  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
      3. 当第2个输入框失去焦点时, 提示这个输入框中的值
   */

    // 1、定义组件
    class MyComponent extends React.Component {

      constructor(props) {

        super(props);

        // 将新增方法中的this强制绑定为组件对象
        this.showInput = this.showInput.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
      }

      showInput() {
        //获取到refs，得到里面的content
        // const input = this.refs.content
        // alert(input)
        console.log(this.input)
      }

      handleBlur(event) {
        console.log(event.target.value);
      }

      render() {
        return (
                <div>
                  <input type="text" ref={input => this.input = input} />
                  <button onClick={this.showInput}>提示输入</button>
                  <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                </div>
        )
      }
    }

    // 2、渲染组件标签
    ReactDOM.render(<MyComponent />, document.getElementById("example"));
  </script>
</body>
</html>
